<template>
	<view class="pages">
     <view class="list">
         <view class="listItem u-flex" v-for="(item,index) in list" :key="index">
            <view class="avatar">
              <image src="../../static/shop/f.png" mode="aspectFill"></image>
            </view>
            <view class="u-flex-1">
               <view class="u-flex">
                  <view class="userName u-line-1">浮生满船清梦</view>
                  <view class="yyNum u-m-l-5">20人预约</view>
               </view>
               <view class="name u-p-t-5">{{item.name}}</view>
               <view class='time u-p-t-5'>直播时间：5-18 15:52</view>
            </view>
            <view class="btn">+关联作品</view>
         </view>
     </view>
	</view>
  <view style="height:188rpx"></view>
  <view class="footer">
     <view class="btnsBottom" @click="navigateTo('/socials/live/live')">新建直播预告</view>
  </view>
</template>

<script setup>
import { ref, nextTick, computed, watch } from 'vue'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onUnload,
  onBackPress,
  onReady,
  onShow,
} from '@dcloudio/uni-app'
import { navigateTo, showToast, navigateBack ,redirectTo} from '@/utils'
   const list = ref([
     {name:'育儿经验'},
     {name:'育儿经验'},
     {name:'育儿经验'}
   ])

</script>

<style>
page{
  background: #F5F6F8;
}
</style>
<style lang="scss" scoped>
  .pages{
     padding: 20rpx 25rpx;
  }
  .listItem{
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 20rpx;
    font-family: PingFangSC, PingFang SC;
    margin-bottom: 20rpx;
    .avatar{
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
      image{
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
      }
    }
    .btn{
      width: 180rpx;
      height: 56rpx;
      background: #00C1B9;
      border-radius: 28rpx;
      text-align: center;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 56rpx;
    }
    .time{
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
    }
    .name{
      font-weight: 400;
      font-size: 26rpx;
      color: #5C5C5C;
    }
    .userName{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #202020;
      width: 165rpx;
    }
    .yyNum{
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 26rpx;
      color: #AAAAAA;
      height: 38rpx;
      line-height: 38rpx;
      border-radius: 5rpx;
      border: 1rpx solid #AAAAAA;
      padding: 0 10rpx;
    }
  }

  .footer{
    background: #FFFFFF;
    padding: 6rpx 25rpx;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding-bottom: calc(6rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(6rpx + env(safe-area-inset-bottom));
    .btnsBottom{
       width: 700rpx;
       height: 88rpx;
       line-height: 88rpx;
       background: #00C1B9;
       border-radius: 44rpx;
       text-align: center;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 30rpx;
       color: #FFFFFF;
    }
  }
</style>
